<template>
  <!-- 内容主体区域 -->
  <div class="content">
    <!-- 左侧榜单区域 -->
    <div class="left-side">
      <div class="tab">
        <div
            class="tab-item"
            :class="{ active: activeTab === 'vip' }"
            @mouseenter="setTab('vip')"
        >vip金榜</div>
        <div
            class="tab-item"
            :class="{ active: activeTab === 'completed' }"
            @mouseenter="setTab('completed')"
        >完结金榜</div>
        <div
            class="tab-item"
            :class="{ active: activeTab === 'thousand' }"
            @mouseenter="setTab('thousand')"
        >千字金榜</div>
      </div>

      <ul class="rank-list">
        <li
            v-for="(item, index) in rankData[activeTab]"
            :key="item.id"
            class="rank-item"
            @click="goRankDetail(item)"
        >
          <!-- 用索引 + 1 显示排名序号，从 1 开始 -->
          <span class="rank-tag">{{ index + 1 }}</span>
          <div class="rank-title">
            {{ item.title }}
          </div>
          <span class="author">{{ item.author }}</span>
        </li>
      </ul>

      <div class="rank-footer">
        <div class="rank-label">
          {{ footerLabel[activeTab] }}
        </div>
      </div>
    </div>

    <!-- 中间内容区域 -->
    <div class="middle-side">
      <div class="banner">
        <img src="@/assets/img/banner.png" alt="banner">
      </div>
      <!--        展示图片以及小说名-->
      <div class="imageList">
        <div class="story" v-for="(yq, index) in yqList" :key="index">
          <div class="storyInfo">
            <img :src="require('@/assets/img/'+yq.storyimg)"  alt="小说图片"></img>
          </div>
          <div @click="goDetail(yq)" class="storyName">《{{yq.name}}》</div>
        </div>
      </div>

      <div class="notice">
        <h3 class="notice-title">最新公告</h3>
        <ul class="notice-list">
          <li class="notice-item">霸王票抽奖和儿童站征文已开启，点击查收端午赠礼！</li>
          <li class="notice-item">五一快乐亿点点！动态装扮+超多好礼兑不停~ [04-29]</li>
          <li class="notice-item">小书喵五周年庆典有奖征集进行中，点击参与五一活动！</li>
        </ul>
      </div>
    </div>

    <!-- 右侧推荐区域 -->
    <div class="right-side">
      <div class="recommend-box">
        <h3 class="recommend-title">vip强力推荐</h3>
        <ul class="recommend-list">
          <li
              v-for="(item, index) in recommendList"
              :key="index"
              class="recommend-item"
          >
            <div class="recommend-text">
              {{ item.title }}
            </div>
            <span class="recommend-author">{{ item.author }}</span>
          </li>
          <div class="report-item">
            <img src="@/assets/img/jb.png">
            <span class="report-word">电话：110</span>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";  // 合并导入语句
import { router } from "@/router/router.ts";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {require} from "@/utils/getFileUrl"

//创建钩子获取数据
let yqList = ref()

//获取数据的页面
onMounted(()=> {
  request.get("/getYs")
      .then(response => {
        yqList.value = response.data
      })
      .catch(error => {
        ElMessage.error(error)
      })
})

//使用小说对象作为参数并打开新窗口跳转详情页（导航栏上只显示小说id和名字）
function goDetail(story) {
  window.open(router.resolve({path: '/details',query:{"story":JSON.stringify(story)}}).href)
}


// 标签切换相关
const activeTab = ref('vip');
function setTab(tab: string) {
  activeTab.value = tab;
}

// 底部标签文本
const footerLabel = {
  vip: 'vip文月销量排行榜',
  completed: '完结文30日销量排行榜',
  thousand: '千字文月销量排行榜'
};

// 排行榜数据（带唯一ID）
const rankData = {
  vip: [
    { id: 1, title: "我骑扫帚去修仙", author: "拉棉花糖的" },
    { id: 2, title: "[三国]穿着龙袍穿越了！", author: "丛鲣" },
    { id: 3, title: "别人航海，我种田", author: "风的铃铛" },
    { id: 4, title: "假如二凤是朝堂的太子", author: "萌盐墨雪" },
    { id: 5, title: "拥有富江体质后秀出道了", author: "厌梨" },
    { id: 6, title: "[三国]我，呼风唤雨", author: "金玉满庭" },
    { id: 7, title: "[综英美]我在哥谭当管家", author: "朝江烬" },
    { id: 8, title: "如何阻止男主发疯", author: "爆炒小黄瓜" },
    { id: 9, title: "超级小子，但反转世界[综英美]", author: "颜荀" },
    { id: 10, title: "某柯学的义勇也没有被讨厌", author: "复西归" },
    { id: 11, title: "我不是在玩单机游戏吗？", author: "成渊" },
    { id: 12, title: "[综英美]蝙蝠侠模拟器", author: "东回继卦" }
  ],
  completed: [
    { id: 13, title: "我骑扫帚去修仙", author: "拉棉花糖的" },
    { id: 14, title: "如何阻止男主发疯", author: "爆炒小黄瓜" },
    { id: 15, title: "说好是恋爱游戏怎么变成了RPG鲨鱼子", author: "白白木" },
    { id: 16, title: "与富江交往之后", author: "月见茶" },
    { id: 17, title: "含羞草也能当邪恶大boss", author: "千山不关" },
    { id: 18, title: "[红楼]懒家长子", author: "老肝妈" },
    { id: 19, title: "强者是怎样炼成的", author: "千光绫风" },
    { id: 20, title: "你以为五条他妈不在乎吗她在乎", author: "千里江风" },
    { id: 21, title: "我比制造系差吗", author: "凡间寓言如" },
    { id: 22, title: "和辟谷成为搭档后", author: "未西归" },
    { id: 23, title: "表演科今天也想与侦探同归于", author: "夜夕岚" },
    { id: 24, title: "卧底系统抽风后我改刷颜值值", author: "松酪脆酱酱" }
  ],
  thousand: [
    { id: 25, title: "别人航海，我种田", author: "风的铃铛" },
    { id: 26, title: "[综英美]玩家立志成为联盟之", author: "蓝鸽路" },
    { id: 27, title: "当夏油杰绑定直播间", author: "温水煮书" },
    { id: 28, title: "超高危级的绝望墨园镜", author: "海上迷雾" },
    { id: 29, title: "你也想养小恶龙吗？", author: "凤箫声醉" },
    { id: 30, title: "长生种开启了猎人朋友圈", author: "折光绕昼" },
    { id: 31, title: "[综英美]默默献香，但马甲月下不归", author: "软不右川" },
    { id: 32, title: "观音从门，不多我", author: "北有雾" },
    { id: 33, title: "如何用马甲合理发刀", author: "就有雾" },
    { id: 34, title: "如何轻松攻略龙傲天[快穿]", author: "杏仁蛋挞" },
    { id: 35, title: "复制最强们的技能后", author: "冬月归" },
    { id: 36, title: "六旬老头勇闯红黑游戏", author: "松酪脆酱酱" }
  ]
};

// 右侧推荐列表数据（带唯一ID），这里用截图里的“论双黑和五夏的”等内容
const recommendList = [
  { id: 37, title: "论双黑和五夏的", author: "星满哦" },
  { id: 38, title: "[足球]天崩开局但没", author: "路行遥" },
  { id: 39, title: "[足球]恋与谢昧", author: "黄梅古茶" },
  { id: 40, title: "我部长说他是重生的", author: "坞伶羽" },
  { id: 41, title: "风神在横滨咒灵", author: "辰晨与风" },
  { id: 42, title: "我妻觉悟指南", author: "源粒子" },
  { id: 43, title: "cos楚清华后穿到柯", author: "临涎" },
  { id: 44, title: "超级侦探", author: "峪茶" },
  { id: 45, title: "为了拯救系统，我", author: "耕烟酿酒" },
  { id: 46, title: "在咒术界收集特级", author: "闲碗碗" },
  { id: 47, title: "我？苍蓝星？彭", author: "咖啡八珍汤" },
  { id: 48, title: "就算在猎人也要维", author: "实如反掌" }
];


// 登录相关函数
function handleLogin() {
  console.log('触发登录操作');
}

// 注册相关函数
function handleRegister() {
  console.log('触发注册操作');
}

// 找回账号函数
function handleFindAccount() {
  console.log('触发找回账号操作');
}

// 找回密码函数
function handleFindPassword() {
  console.log('触发找回密码操作');
}

// 导航函数
function navigateTo(path: string) {
  console.log('导航到路径：', path);
}
function goTonovelList() {
  router.push({path: '/novelList'})
}
</script>

<style scoped>
@import '@/assets/css/yq.css';
</style>